div.project-panel {
  a {
    &:hover {
      text-decoration: none;
    }
  }
  .project {
    .image {
      border-radius: 50%;
    }
  }
  .language-yaml {
    display: none;
  }
}

.project-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 12px
}

.project-panel .project {
  position: relative;
  width: calc(33% - 40px);
  margin: 6px 8px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-color-float);
  transition: background var(--color-transition),transform var(--transform-transition)
}

@media (max-width: 959px) {
  .project-panel .project {
      width:calc(50% - 40px)
  }
}

@media (min-width: 1440px) {
  .project-panel .project {
      width:calc(25% - 40px)
  }
}

.project-panel .project:hover {
  cursor: pointer;
  transform: scale(.98)
}

.project-panel .project .name {
  position: relative;
  z-index: 2;
  color: var(--grey3);
  font-weight: 500;
  font-size: 16px;
  transition: color var(--color-transition)
}

.project-panel .project .desc {
  position: relative;
  z-index: 2;
  margin: 6px 0;
  color: var(--dark-grey);
  font-size: 13px
}

.project-panel .project .image {
  position: relative;
  z-index: 2;
  float: right;
  width: 40px;
  height: 40px
}

html[dir=rtl] .project-panel .project .image {
  float: left
}

.project-panel .project .icon {
  position: relative;
  z-index: 2;
  float: right;
  width: 20px;
  height: 20px
}

html[dir=rtl] .project-panel .project .icon {
  float: left
}

.project-panel .project0 {
  background: #fde5e7
}

.project-panel .project0:hover {
  background: #f9bec3
}

html[data-theme=dark] .project-panel .project0 {
  background: #340509
}

html[data-theme=dark] .project-panel .project0:hover {
  background: #53080e
}

.project-panel .project1 {
  background: #ffeee8
}

.project-panel .project1:hover {
  background: #fed4c6
}

html[data-theme=dark] .project-panel .project1 {
  background: #441201
}

html[data-theme=dark] .project-panel .project1:hover {
  background: #6d1d02
}

.project-panel .project2 {
  background: #fef5e7
}

.project-panel .project2:hover {
  background: #fce6c4
}

html[data-theme=dark] .project-panel .project2 {
  background: #3e2703
}

html[data-theme=dark] .project-panel .project2:hover {
  background: #633f05
}

.project-panel .project3 {
  background: #eafaf1
}

.project-panel .project3:hover {
  background: #caf3db
}

html[data-theme=dark] .project-panel .project3 {
  background: #0c331c
}

html[data-theme=dark] .project-panel .project3:hover {
  background: #12522d
}

.project-panel .project4 {
  background: #e6f9ee
}

.project-panel .project4:hover {
  background: #c0f1d5
}

html[data-theme=dark] .project-panel .project4 {
  background: #092917
}

html[data-theme=dark] .project-panel .project4:hover {
  background: #0f4224
}

.project-panel .project5 {
  background: #e1fcfc
}

.project-panel .project5:hover {
  background: #b4f8f8
}

html[data-theme=dark] .project-panel .project5 {
  background: #042929
}

html[data-theme=dark] .project-panel .project5:hover {
  background: #064242
}

.project-panel .project6 {
  background: #e4f0fe
}

.project-panel .project6:hover {
  background: #bbdafc
}

html[data-theme=dark] .project-panel .project6 {
  background: #021b36
}

html[data-theme=dark] .project-panel .project6:hover {
  background: #042c57
}

.project-panel .project7 {
  background: #f7f1fd
}

.project-panel .project7:hover {
  background: #eadbfa
}

html[data-theme=dark] .project-panel .project7 {
  background: #2a0b4b
}

html[data-theme=dark] .project-panel .project7:hover {
  background: #431277
}

.project-panel .project8 {
  background: #fdeaf5
}

.project-panel .project8:hover {
  background: #facbe5
}

html[data-theme=dark] .project-panel .project8 {
  background: #400626
}

html[data-theme=dark] .project-panel .project8:hover {
  background: #670a3d
}
